<template>
  <div class="path-display">
    <template v-if="pathInfo && pathInfo.fullPath">
      <template v-if="pathInfo.analysis">
        <!-- 默认路径部分 -->
        <span v-if="pathInfo.analysis.defaultPath" class="default-path">{{ pathInfo.analysis.defaultPath }}</span>
        <span v-if="pathInfo.analysis.defaultPath && hasRelativeParts">/</span>

        <!-- 模块名前的部分 -->
        <span v-if="pathInfo.analysis.beforeModule" class="standard-path">{{ pathInfo.analysis.beforeModule }}</span>

        <!-- 模块名部分 - 根据文件类型区分颜色 -->
        <span v-if="pathInfo.analysis.moduleName" :class="getModuleNameClass()">{{ pathInfo.analysis.moduleName }}</span>

        <!-- 业务名前的部分 -->
        <span v-if="pathInfo.analysis.beforeBusiness" class="standard-path">{{ pathInfo.analysis.beforeBusiness }}</span>

        <!-- 业务名部分 -->
        <span v-if="pathInfo.analysis.businessName" class="business-name">{{ pathInfo.analysis.businessName }}</span>

        <!-- 业务名后的部分 -->
        <span v-if="pathInfo.analysis.afterBusiness" class="standard-path">{{ pathInfo.analysis.afterBusiness }}</span>

        <!-- 模块名后的部分（当没有业务名时） -->
        <span v-if="pathInfo.analysis.afterModule" class="standard-path">{{ pathInfo.analysis.afterModule }}</span>

        <!-- 标准路径部分 -->
        <span v-if="pathInfo.analysis.standardPath" class="standard-path">{{ pathInfo.analysis.standardPath }}</span>

        <!-- 完全自定义路径 -->
        <span v-if="pathInfo.analysis.customPath" class="custom-path">{{ pathInfo.analysis.customPath }}</span>
      </template>
      <template v-else>
        <span class="standard-path">{{ pathInfo.fullPath }}</span>
      </template>
    </template>
    <template v-else>
      <span class="standard-path">{{ pathInfo || '未知路径' }}</span>
    </template>
  </div>
</template>

<script setup>
const props = defineProps({
  pathInfo: {
    type: Object,
    default: () => ({})
  }
});

const hasRelativeParts = computed(() => {
  const analysis = props.pathInfo?.analysis;
  return analysis && (
    analysis.beforeModule ||
    analysis.moduleName ||
    analysis.beforeBusiness ||
    analysis.businessName ||
    analysis.afterBusiness ||
    analysis.afterModule ||
    analysis.standardPath
  );
});

// 判断是否为前端文件
const isFrontendFile = computed(() => {
  // 优先使用后端传递的文件类型标识
  if (props.pathInfo?.analysis?.isFrontendFile !== undefined) {
    return props.pathInfo.analysis.isFrontendFile;
  }

  // 备用判断逻辑
  const fullPath = props.pathInfo?.fullPath || '';
  return fullPath.includes('.js') || fullPath.includes('.vue') ||
         fullPath.includes('/api/') || fullPath.includes('/views/');
});

// 根据文件类型返回模块名样式类
const getModuleNameClass = () => {
  return isFrontendFile.value ? 'frontend-module-name' : 'module-name';
};
</script>

<style scoped>
/* 路径颜色样式 */
.default-path {
  color: #67c23a; /* 绿色文字 - 默认路径 */
  font-weight: 600;
  background-color: #f0f9ff; /* 浅蓝色背景 */
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid #e1f5fe;
}

.module-name {
  color: #409eff; /* 蓝色 - 后端模块名 */
  font-weight: 600;
  background-color: #ecf5ff;
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid #d4edff;
}

.frontend-module-name {
  color: #e6a23c; /* 橙色 - 前端模块名 */
  font-weight: 600;
  background-color: #fdf6ec;
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid #faecd8;
}

.business-name {
  color: #e6a23c; /* 橙色 - 业务名称 */
  font-weight: 600;
  background-color: #fdf6ec;
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid #faecd8;
}

.standard-path {
  color: #606266; /* 灰色 - 标准路径 */
}

.custom-path {
  color: #f56c6c; /* 红色 - 完全自定义路径 */
  font-weight: 500;
}

/* 路径显示容器 */
.path-display {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.4;
  word-break: break-all;
  white-space: pre-wrap;
}
</style>
